
<template>
    <div>
          <!-- 面包屑导航区域 -->
        <v-breadcrumb separator="/">
        <v-breadcrumb-item :to="{ path: '/helloworld' }">首页</v-breadcrumb-item>
        <v-breadcrumb-item>小程序管理</v-breadcrumb-item>
        <v-breadcrumb-item>管理用户</v-breadcrumb-item>
        </v-breadcrumb>
        <!-- <卡片区域> -->
        <v-card>
            <!--搜索与添加区-->
            <v-row :gutter="20">
            <v-col :span="1">
              <v-button type="ghost" icon="search" shape="circle" @click="getUserList"></v-button>
              </v-col>
            <v-col :span="8">
              <v-input icon="search" placeholder="请输入内容"  v-model="query" clearable @clear="getUserList">
              </v-input>
            </v-col>
            <!-- <v-col :span="4">
              <v-button type="primary" @click="addDialogVisible=true">添加用户</v-button>
            </v-col> -->
          </v-row>
        </v-card>

        <!--用户列表区-->
  <el-table :data="UserList"  height="450" style="width: 100%" border stripe>
      <el-table-column type="index"> </el-table-column>
      <el-table-column label="用户ID" prop="id"  > 
         <template slot-scope="scope">
         <span style="margin-left: 10px"  @click="goTolist(scope.row)" >{{ scope.row.id }} </span>
          </template>
      </el-table-column>
      <el-table-column label="用户昵称" prop="name"  > 
          <template slot-scope="scope">
         <span style="margin-left: 10px"  @click="goTolist(scope.row)" >{{ scope.row.name }} </span>
          </template>
      </el-table-column>
      <el-table-column label="操作"  width="180px"> 
          <template  slot-scope="scope">
              <!-- <用户编辑修改区> -->
               <el-tooltip  effect="dark" content="修改" placement="top" :enterable="false">
               <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row)"></el-button>
               </el-tooltip>
              <!--删除-->
               <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete"  size="mini" @click="removeUserById(scope.row.id)"></el-button>
               </el-tooltip>
              <!--查看-->
               <el-tooltip class="item" effect="dark" content="查看详情" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting"  size="mini"  @click="showDetail=true"></el-button>
               </el-tooltip>
          </template>
      </el-table-column>
  </el-table>


    <!-- 用户详情 -->
<v-modal title="用户详情" :visible.sync="showDetail"  @close="addDialogClosed" >
  <v-form   :model='addForm' ref="addFormRef" direction="horizontal">
  <v-form-item label="用户昵称" prop="name" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="addForm.name"></v-input>
  </v-form-item>

   <v-form-item label="语言" prop="language" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="addForm.language"></v-input>
  </v-form-item>
  <v-form-item label="用户头像" prop="avatar" :label-col="labelCol" :wrapper-col="wrapperCol">
    <el-avatar shape="square" :size="100" :src="addForm.avatar"></el-avatar>
   </v-form-item>

  </v-form>

  <span slot="footer" class="dialog-footer">
    <v-button @click="showDetail=false">取 消</v-button>
    <v-button type="primary"  @click="showDetail=false"> 确 定</v-button>
  </span>
</v-modal>

<!-- <修改用户的对话框> -->
<v-modal title="修改聊天室" :visible.sync="editDialogVisible"  @close="editDialogClosed" >
  <v-form ref="editFormRef" :model="editForm"   direction="horizontal">
  <v-form-item label="用户昵称" prop="name" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="editForm.name" ></v-input>
  </v-form-item>
  <v-form-item label="上传图片" prop="avatar" :label-col="labelCol" :wrapper-col="wrapperCol">
    <!-- <v-input v-model="editForm.avatar" ></v-input> -->
    <div style="width: 246px; height: 146px">
      <v-upload :name="name" :action="action" drag @change="onChange">
          <v-icon type="plus"></v-icon>
      </v-upload>
    </div>
  </v-form-item>
  </v-form>
  <span slot="footer" class="dialog-footer">
    <v-button @click="editDialogVisible= false">取 消</v-button>
    <v-button type="primary" @click="editUserInfo">确 定</v-button>
  </span>
</v-modal>
</div>
</template>

<script>
import {getUserList,deleteUser,updateUser} from  '../../util/api.js'

export default {
 
    data()
    {
        return{
            count: 0,
            query:'',
            name:'',
            id:'',
            UserList:'',
            avatar:'',
            language:'',
            city:'',
            country:'',
            province:'',
            gender:'',
            name: 'file',
      action: '/upload',
            labelCol: {span: 6},
            wrapperCol: {span: 14},
            showDetail:false,
            //添加聊天室的对话框
          // addDialogVisible:false,
          total:0,
          pagenum:0,
          pagesize:0,
           //修改聊天室信息
          editDialogVisible:false,
           editForm:{
            avatar:'',
            language:'',
            city:'',
            country:'',
            province:'',
            gender:'',
            id:'',
            name:'',
           },
           addForm:{
             avatar:'',
            language:'',
            city:'',
            country:'',
            province:'',
            gender:'',
            id:'',
            name:'',
           },
             
          
        }
        
    },
    created(){
      this.token= window.sessionStorage.getItem('token')
      this.getUserList()
    },
    methods:{
      async getUserList(){
        const result =await this.$http.post(getUserList,
          {
            'token': this.token
          }
          );
            console.log(result)
            if(result.status!==200) return this.$message.console.error("获取数据失败！");
            this.UserList=result.data.list
            this.$message.success("获取数据成功")    

      },
      onChange(info) {
        console.log(info)
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList)
        }
        if (info.file.status === 'done') {
          console.log(info.file.name + ' 上传成功.')
        } else if (info.file.status === 'error') {
          console.log(info.file.name + ' 上传失败.')
        }
      },
      goTolist(e)
      {
        console.log(e)
        this.$router.push({path:'/list',
        query:{
          userId:e.id
          }
          })
      },
       
    
    addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },

    showEditDialog(id){
            console.log(id)
            this.editDialogVisible=true
            this.editForm.nickName=id.nickName
            this.editForm.id=id.id
            this.editForm.avatarUrl =id.avatarUrl

        },
        //监听修改用户对话框的关闭事件
  editDialogClosed(){
            this.$refs.editFormRef.resetFields()

        },
       
  editUserInfo(){
            this.$refs.editFormRef.validate(async valid=>{
                // console.log(valid)
                if(!valid) return
                //发起修改用户信息的请求
                //关闭对话框
                this.editDialogVisible=false
                //刷新列表
                this.getUserList()
                //提示更新成功
                this.$message.success('更新用户成功')
            })
        },
  async removeUserById(id){
            console.log(id)
            //先弹框询问
          const confirmResult=await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=> err)
        if(confirmResult!='confirm')
        {
            return this.$message.info('已经取消删除')
        }
        //删除用户
       const result =await this.$http.post(deleteUser,
          {
            'token': this.token,
            'objectId':id
          }
       )
        this.editDialogVisible=false
                //刷新列表
        this.getUserList()
                //提示更新成功
        this.$message.success('删除用户成功')

    }
       

    }
}

</script>
<style lang="less" scoped>


</style>